export let logicNodes = {
	globalNodes: [
		{
			id: 1,
			name: '全局节点',
			icon: 'orange'
		}
	],
	flowNodes: [
		{
			id: 2,
			name: '分支判断',
			icon: 's-operation'
		},
		{
			id: 3,
			name: '多路判断',
			icon: 'rank'
		},
		{
			id: 4,
			name: '定时器',
			icon: 'pie-chart'
		}
	],
	dataProcesNodes: [
		{
			id: 5,
			name: '页面导航',
			icon: 's-promotion'
		},
		{
			id: 6,
			name: '并行数据处理',
			icon: 'tickets',
			disabled: true
		},
		{
			id: 7,
			name: '串行数据处理',
			icon: 'document-remove'
		},
		{
			id: 8,
			name: '序列执行',
			icon: 's-unfold',
			disabled: true
		},
		{
			id: 9,
			name: 'WebSocket',
			icon: 'connection',
			disabled: true
		}
	],
	inputEquipmentNodes: [
		{
			id: 10,
			name: '键盘',
			icon: 'refrigerator'
		}
	]
};
let baseObj = {
	shape: 'html',
	x: 200,
	y: 200,
	width: 150,
	logicNode: true
};
export function renderLogicNodeGraph(item) {
	switch (item.id) {
		case 1:
			return renderQJJD(item);
			break;
		case 2:
			return renderFZPD(item);
			break;
		case 3:
			return renderDLPD(item);
			break;
		case 4:
			return renderDSQ(item);
			break;
		case 5:
			return renderYMDH(item);
			break;
		case 7:
			return renderCXSJCL(item);
			break;
		case 10:
			return renderJP(item);
			break;
		default:
			break;
	}
}
// 全局节点 - 全局节点
function renderQJJD(item) {
	let outItems = [
		{
			id: 'outPort' + 1,
			group: 'out',
			args: {
				x: '100%',
				y: 65
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '全部组件初始化完成'
				}
			}
		},
		{
			id: 'outPort' + 2,
			group: 'out',
			args: {
				x: '100%',
				y: 90
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '数据加载完成'
				}
			}
		}
	];

	let inItems = [
		{
			id: 'inPort' + 1,
			group: 'in',
			args: {
				x: '0%',
				y: 150
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '设置回调ID'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		},
		{
			id: 'inPort' + 2,
			group: 'in',
			args: {
				x: '0%',
				y: 175
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '设置临时变量'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		},
		{
			id: 'inPort' + 3,
			group: 'in',
			args: {
				x: '0%',
				y: 200
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '更新全部组件'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		}
	];
	return {
		...baseObj,
		height: 220,
		attrs: {
			body: {
				fill: '#1d2027'
			}
		},
		ports: {
			groups: {
				// 输入链接桩群组定义
				in: {
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				},
				// 输出链接桩群组定义
				out: {
					label: {
						position: {
							name: 'left'
						}
					},
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				}
			},
			items: inItems.concat(outItems)
		},
		html: renderCustomDom(item, 1)
	};
}

// 流程控制 - 分支判断
function renderFZPD(item) {
	let outItems = [
		{
			id: 'outPort' + 1,
			group: 'out',
			args: {
				x: '100%',
				y: 40
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '满足'
				}
			}
		},
		{
			id: 'outPort' + 2,
			group: 'out',
			args: {
				x: '100%',
				y: 65
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '不满足'
				}
			}
		}
	];

	let inItems = [
		{
			id: 'inPort' + 1,
			group: 'in',
			args: {
				x: '0%',
				y: 40
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '判断'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		}
	];
	return {
		...baseObj,
		height: 80,
		attrs: {
			body: {
				fill: '#1d2027'
			}
		},
		ports: {
			groups: {
				// 输入链接桩群组定义
				in: {
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				},
				// 输出链接桩群组定义
				out: {
					label: {
						position: {
							name: 'left'
						}
					},
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				}
			},
			items: inItems.concat(outItems)
		},
		html: renderCustomDom(item, 2)
	};
}

// 流程控制 - 多路判断
function renderDLPD(item) {
	let outItems = [
		{
			id: 'outPort' + 1,
			group: 'out',
			args: {
				x: '100%',
				y: 40
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: 'case-0'
				}
			}
		},
		{
			id: 'outPort' + 2,
			group: 'out',
			args: {
				x: '100%',
				y: 70
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '满足默认条件'
				}
			}
		}
	];

	let inItems = [
		{
			id: 'inPort' + 1,
			group: 'in',
			args: {
				x: '0%',
				y: 40
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '判断'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		}
	];

	return {
		...baseObj,
		height: 80,
		attrs: {
			body: {
				fill: '#1d2027'
			}
		},
		ports: {
			groups: {
				// 输入链接桩群组定义
				in: {
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				},
				// 输出链接桩群组定义
				out: {
					label: {
						position: {
							name: 'left'
						}
					},
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				}
			},
			items: inItems.concat(outItems)
		},
		html: renderCustomDom(item, 2)
	};
}

// 流程控制 - 定时器
function renderDSQ(item) {
	let outItems = [
		{
			id: 'outPort' + 1,
			group: 'out',
			args: {
				x: '100%',
				y: 40
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '当到计时点时'
				}
			}
		}
	];

	let inItems = [
		{
			id: 'inPort' + 1,
			group: 'in',
			args: {
				x: '0%',
				y: 40
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '开始计时'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		},
		{
			id: 'inPort' + 2,
			group: 'in',
			args: {
				x: '0%',
				y: 70
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '停止计时'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		}
	];
	return {
		...baseObj,
		height: 80,
		attrs: {
			body: {
				fill: '#1d2027'
			}
		},
		ports: {
			groups: {
				// 输入链接桩群组定义
				in: {
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				},
				// 输出链接桩群组定义
				out: {
					label: {
						position: {
							name: 'left'
						}
					},
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				}
			},
			items: inItems.concat(outItems)
		},
		html: renderCustomDom(item, 2)
	};
}

// 数据处理 - 页面导航
function renderYMDH(item) {
	let outItems = [];

	let inItems = [
		{
			id: 'inPort' + 1,
			group: 'in',
			args: {
				x: '0%',
				y: 45
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '打开页面'
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		}
	];
	return {
		...baseObj,
		height: 60,
		attrs: {
			body: {
				fill: '#1d2027'
			}
		},
		ports: {
			groups: {
				// 输入链接桩群组定义
				in: {
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				},
				// 输出链接桩群组定义
				out: {
					label: {
						position: {
							name: 'left'
						}
					},
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				}
			},
			items: inItems.concat(outItems)
		},
		html: renderCustomDom(item, 3)
	};
}

// 数据处理 - 串行数据处理
function renderCXSJCL(item) {
	let outItems = [
		{
			id: 'outPort' + 1,
			group: 'out',
			args: {
				x: '100%',
				y: 45
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: ''
				}
			}
		}
	];

	let inItems = [
		{
			id: 'inPort' + 1,
			group: 'in',
			args: {
				x: '0%',
				y: 45
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: ''
				}
			},
			label: {
				position: {
					name: 'right', // 标签位置计算方法的名称
					args: {} // 标签位置计算方法的参数
				}
			}
		}
	];
	return {
		...baseObj,
		height: 60,

		attrs: {
			body: {
				fill: '#1d2027'
			},
			nodeType: 7
		},
		ports: {
			groups: {
				// 输入链接桩群组定义
				in: {
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				},
				// 输出链接桩群组定义
				out: {
					label: {
						position: {
							name: 'left'
						}
					},
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				}
			},
			items: inItems.concat(outItems)
		},
		html: renderCustomDom(item, 3)
	};
}

// 输入设备 - 键盘
function renderJP(item) {
	let outItems = [
		{
			id: 'outPort' + 1,
			group: 'out',
			args: {
				x: '100%',
				y: 45
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '当任意键按下时'
				}
			}
		},
		{
			id: 'outPort' + 2,
			group: 'out',
			args: {
				x: '100%',
				y: 70
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '当字符键按下时'
				}
			}
		},
		{
			id: 'outPort' + 3,
			group: 'out',
			args: {
				x: '100%',
				y: 95
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '当按键释放时'
				}
			}
		},
		{
			id: 'outPort' + 4,
			group: 'out',
			args: {
				x: '100%',
				y: 120
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '向上'
				}
			}
		},
		{
			id: 'outPort' + 5,
			group: 'out',
			args: {
				x: '100%',
				y: 145
			},
			attrs: {
				text: {
					fontSize: 10,
					fill: '#c0c6d6',
					text: '向下'
				}
			}
		}
	];

	let inItems = [];
	return {
		...baseObj,
		height: 160,
		attrs: {
			body: {
				fill: '#1d2027'
			}
		},
		ports: {
			groups: {
				// 输入链接桩群组定义
				in: {
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				},
				// 输出链接桩群组定义
				out: {
					label: {
						position: {
							name: 'left'
						}
					},
					attrs: {
						circle: {
							r: 4,
							magnet: true,
							stroke: '#fff',
							strokeWidth: 2,
							fill: '#44474c'
						}
					},
					position: {
						name: 'absolute'
					}
				}
			},
			items: inItems.concat(outItems)
		},
		html: renderCustomDom(item, 4)
	};
}

/**
 *
 * @param {*} item
 * @param {number} [nodeType=1]
 * @return {*}
 */
function renderCustomDom(item, nodeType = 1) {
	let { name, icon, id } = item;
	let titleBgColor = '#252c34';
	switch (nodeType) {
		case 1:
			titleBgColor = '#0d5eff';
			break;
		case 2:
			titleBgColor = '#ff700b';
			break;
		case 3:
			titleBgColor = '#139b00';
			break;
		case 4:
			titleBgColor = '#6d4eff';
			break;
		default:
			break;
	}
	let eventDom = `<div style="font-size:10px;width:100%;border:1px solid #1d2027;padding-left:10px;box-sizing:border-box;line-height:23px;color:#fff;background:#252c34">
                事件
            </div>`;

	let actionDom = `<div style="font-size:10px;margin-top:55px;
            width:100%;border:1px solid #1d2027;padding-left:10px;box-sizing:border-box;line-height:23px;color:#fff;background:#252c34">
                动作
            </div>`;

	let titleDom = `<div style="font-size:12px;font-weight:bold;width:100%;border:1px solid #1d2027;padding-left:10px;text-overflow:ellipsis;box-sizing:border-box;overflow:hidden;white-space:nowrap;line-height:23px;color:#fff;background:${titleBgColor}"> 
                <i class="el-icon-${icon}"></i>
                <span style="margin-left:3px;">${name}</span>
                </div>
                `;

	let subTitleDom = `
    <div style="font-size:12px;width:100%;padding-left:10px;box-sizing:border-box;line-height:34px;color:#fff;"> 
        <span style="margin-left:3px;">处理方法</span>
    </div>
    `;

	let customDom = `${titleDom}
      ${id == 1 ? eventDom : ''}
      ${id == 1 ? actionDom : ''}
      ${id == 7 ? subTitleDom : ''}`;

	return customDom;
}
